<template>
    <div class="next-page-box" @click="click">
        <div class="next" v-if="!loading && !more && !data">下一页 &#xe701;</div>
        <div class="loading" v-else-if="loading">
            <mt-spinner type="fading-circle" style="margin-right: 5px;" :size="20"></mt-spinner>
            数据加载中...
        </div>
        <div class="no-data" v-else-if="data">没有数据</div>
        <div class="no-more" v-else="data">没有更多了</div>
    </div>
</template>

<script>
    export default {
        name: "nextPage",
        props: ['loading', 'more', 'data'],
        methods: {
            click() {
                this.$emit('more', true)
            }
        }
    }
</script>

<style scoped lang="less">
@import "../assets/css/bases";
.next-page-box {
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    .loading, .no-more, .no-data {
        color: @gray;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>